<template>
    <div class="post-info">
        <div class="post-info-header">
            <el-skeleton animated :loading="loading">
                <template #template>
                    <el-skeleton-item variant="h1" style="width: 80%; height: 100px" />
                    <el-skeleton :rows="5" />
                </template>
                <template #default>
                    <div class="post-info-title">{{ postinfo.title }}</div>
                    <div class="post-info-content">
                        <el-scrollbar><span v-html="postinfo.content"></span></el-scrollbar>
                    </div>
                </template>
            </el-skeleton>
        </div>
        <div class="post-info-options">
            <el-skeleton animated :loading="loading">
                <template #template>
                    <el-skeleton-item variant="text" style="width: 100%" />
                </template>
                <template #default>
                    <span><el-icon :size="18" @click="changeThump">
                            <IconPark v-if="postinfo.likes" :theme="'filled'" :fill="'#2a97d1'" :icon="ThumbsUp"
                                :strokeWidth="2" />
                            <IconPark v-else :icon="ThumbsUp" :strokeWidth="2" />
                        </el-icon></span>
                    <span><el-icon :size="20">
                            <IconPark :icon="PreviewOpen" :strokeWidth="2" :theme="'filled'" :fill="'#2a97d1'" />
                        </el-icon>{{ postinfo.views }}</span>
                </template>
            </el-skeleton>
        </div>
    </div>
</template>

<script setup lang="ts">
import IconPark from "@components/IconPark.vue";
import { ThumbsUp, PreviewOpen } from "@icon-park/vue-next";
import { usePostInfo } from "@store/postinfo";
import { storeToRefs } from "pinia";
import { post_cancel } from "@api/postapi";
import { post_like } from "@/api/postapi";
import { useUserInfo } from "@store/userinfo";


const { loading } = defineProps<{
    loading: boolean
}>()
const { userinfo } = storeToRefs(useUserInfo());
const { postinfo } = storeToRefs(usePostInfo());

const changeThump = async () => {
    if (postinfo.value.likes) {
        const res = await post_cancel({ id: postinfo.value.id, userId: userinfo.value.id });
        if (res.code === 200) {
            postinfo.value.likes = 0;
            ElMessage.success("取消点赞成功!");
        }
    } else {
        const res = await post_like({ id: postinfo.value.id, userId: userinfo.value.id });
        if (res.code === 200) {
            postinfo.value.likes = 1;
            ElMessage.success("帖子点赞成功！");
        }
    }
}

</script>

<style scoped lang="less">
.post-info {
    flex: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .post-info-header {
        height: 300px;

        .post-info-title {
            font-size: 35px;
            font-weight: 500;
            margin-top: 20px;
        }

        .post-info-content {
            height: 215px;
            width: 100%;
            margin-top: 20px;
        }
    }

    .post-info-options {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        span {
            display: flex;
            align-items: center;
            margin-right: 15px;

            .el-icon {
                cursor: pointer;
            }
        }
    }
}
</style>
